<template>
  <div class="word-container">
    <div class="chart-box" ref="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-wordcloud";

let myChart;

let jsonlist = [
  {
    name: "花鸟市场",
    value: 1446,
  },
  {
    name: "汽车",
    value: 928,
  },
  {
    name: "视频",
    value: 906,
  },
  {
    name: "电视",
    value: 825,
  },
  {
    name: "Lover Boy 88",
    value: 514,
  },
  {
    name: "动漫",
    value: 486,
  },
  {
    name: "音乐",
    value: 5999,
  },
  {
    name: "直播",
    value: 163,
  },
  {
    name: "广播电台",
    value: 86,
  },
  {
    name: "戏曲曲艺",
    value: 17,
  },
  {
    name: "演出票务",
    value: 6,
  },
  {
    name: "给陌生的你听",
    value: 1,
  },
  {
    name: "资讯",
    value: 1437,
  },
  {
    name: "商业财经",
    value: 422,
  },
  {
    name: "娱乐八卦",
    value: 353,
  },
  {
    name: "军事",
    value: 331,
  },
  {
    name: "科技资讯",
    value: 313,
  },
  {
    name: "社会时政",
    value: 307,
  },
  {
    name: "时尚",
    value: 43,
  },
  {
    name: "网络奇闻",
    value: 15,
  },
  {
    name: "旅游出行",
    value: 438,
  },
  {
    name: "景点类型",
    value: 957,
  },
  {
    name: "国内游",
    value: 927,
  },
  {
    name: "远途出行方式",
    value: 908,
  },
  {
    name: "酒店",
    value: 693,
  },
  {
    name: "关注景点",
    value: 611,
  },
  {
    name: "旅游网站偏好",
    value: 512,
  },
  {
    name: "出国游",
    value: 382,
  },
  {
    name: "交通票务",
    value: 312,
  },
  {
    name: "旅游方式",
    value: 187,
  },
  {
    name: "旅游主题",
    value: 163,
  },
  {
    name: "港澳台",
    value: 104,
  },
  {
    name: "本地周边游",
    value: 3,
  },
  {
    name: "小卖家",
    value: 1331,
  },
  {
    name: "全日制学校",
    value: 941,
  },
  {
    name: "基础教育科目",
    value: 585,
  },
  {
    name: "考试培训",
    value: 473,
  },
  {
    name: "语言学习",
    value: 358,
  },
  {
    name: "留学",
    value: 246,
  },
  {
    name: "K12课程培训",
    value: 207,
  },
  {
    name: "艺术培训",
    value: 194,
  },
  {
    name: "技能培训",
    value: 104,
  },
  {
    name: "IT培训",
    value: 87,
  },
  {
    name: "高等教育专业",
    value: 63,
  },
  {
    name: "家教",
    value: 48,
  },
  {
    name: "体育培训",
    value: 23,
  },
  {
    name: "职场培训",
    value: 5,
  },
  {
    name: "金融财经",
    value: 1328,
  },
  {
    name: "银行",
    value: 765,
  },
  {
    name: "股票",
    value: 452,
  },
  {
    name: "保险",
    value: 415,
  },
  {
    name: "贷款",
    value: 253,
  },
  {
    name: "基金",
    value: 211,
  },
  {
    name: "信用卡",
    value: 180,
  },
  {
    name: "外汇",
    value: 138,
  },
  {
    name: "P2P",
    value: 116,
  },
  {
    name: "贵金属",
    value: 98,
  },
  {
    name: "债券",
    value: 93,
  },
  {
    name: "网络理财",
    value: 92,
  },
  {
    name: "信托",
    value: 90,
  },
  {
    name: "征信",
    value: 76,
  },
  {
    name: "期货",
    value: 76,
  },
  {
    name: "公积金",
    value: 40,
  },
  {
    name: "银行理财",
    value: 36,
  },
  {
    name: "银行业务",
    value: 30,
  },
  {
    name: "典当",
    value: 7,
  },
  {
    name: "海外置业",
    value: 1,
  },
  {
    name: "汽车",
    value: 1309,
  },
  {
    name: "汽车档次",
    value: 965,
  },
  {
    name: "汽车品牌",
    value: 900,
  },
  {
    name: "汽车车型",
    value: 727,
  },
  {
    name: "购车阶段",
    value: 461,
  },
  {
    name: "二手车",
    value: 309,
  },
  {
    name: "汽车美容",
    value: 260,
  },
  {
    name: "新能源汽车",
    value: 173,
  },
  {
    name: "汽车维修",
    value: 155,
  },
  {
    name: "租车服务",
    value: 136,
  },
  {
    name: "车展",
    value: 121,
  },
  {
    name: "违章查询",
    value: 76,
  },
  {
    name: "汽车改装",
    value: 62,
  },
  {
    name: "汽车用品",
    value: 37,
  },
  {
    name: "路况查询",
    value: 32,
  },
  {
    name: "汽车保险",
    value: 28,
  },
  {
    name: "陪驾代驾",
    value: 4,
  },
  {
    name: "网络购物",
    value: 1275,
  },
  {
    name: "做我的猫",
    value: 1088,
  },
  {
    name: "只想要你知道",
    value: 907,
  },
  {
    name: "团购",
    value: 837,
  },
  {
    name: "比价",
    value: 201,
  },
  {
    name: "海淘",
    value: 195,
  },
  {
    name: "移动APP购物",
    value: 179,
  },
  {
    name: "支付方式",
    value: 119,
  },
  {
    name: "代购",
    value: 43,
  },
  {
    name: "体育健身",
    value: 1234,
  },
  {
    name: "体育赛事项目",
    value: 802,
  },
  {
    name: "运动项目",
    value: 405,
  },
  {
    name: "体育类赛事",
    value: 337,
  },
  {
    name: "健身项目",
    value: 199,
  },
  {
    name: "健身房健身",
    value: 78,
  },
  {
    name: "运动健身",
    value: 77,
  },
  {
    name: "家庭健身",
    value: 36,
  },
  {
    name: "健身器械",
    value: 29,
  },
  {
    name: "办公室健身",
    value: 3,
  },
  {
    name: "商务服务",
    value: 1201,
  },
  {
    name: "法律咨询",
    value: 508,
  },
  {
    name: "化工材料",
    value: 147,
  },
  {
    name: "广告服务",
    value: 125,
  },
  {
    name: "会计审计",
    value: 115,
  },
  {
    name: "人员招聘",
    value: 101,
  },
  {
    name: "印刷打印",
    value: 66,
  },
  {
    name: "知识产权",
    value: 32,
  },
  {
    name: "翻译",
    value: 22,
  },
  {
    name: "安全安保",
    value: 9,
  },
  {
    name: "公关服务",
    value: 8,
  },
  {
    name: "商旅服务",
    value: 2,
  },
  {
    name: "展会服务",
    value: 2,
  },
  {
    name: "特许经营",
    value: 1,
  },
  {
    name: "休闲爱好",
    value: 1169,
  },
  {
    name: "收藏",
    value: 412,
  },
  {
    name: "摄影",
    value: 393,
  },
  {
    name: "温泉",
    value: 230,
  },
  {
    name: "博彩彩票",
    value: 211,
  },
  {
    name: "美术",
    value: 207,
  },
  {
    name: "书法",
    value: 139,
  },
  {
    name: "DIY手工",
    value: 75,
  },
  {
    name: "舞蹈",
    value: 23,
  },
  {
    name: "钓鱼",
    value: 21,
  },
  {
    name: "棋牌桌游",
    value: 17,
  },
  {
    name: "KTV",
    value: 6,
  },
  {
    name: "密室",
    value: 5,
  },
  {
    name: "采摘",
    value: 4,
  },
  {
    name: "电玩",
    value: 1,
  },
  {
    name: "真人CS",
    value: 1,
  },
  {
    name: "轰趴",
    value: 1,
  },
  {
    name: "家电数码",
    value: 1111,
  },
  {
    name: "手机",
    value: 885,
  },
  {
    name: "电脑",
    value: 543,
  },
  {
    name: "大家电",
    value: 321,
  },
  {
    name: "家电关注品牌",
    value: 253,
  },
  {
    name: "网络设备",
    value: 162,
  },
  {
    name: "摄影器材",
    value: 149,
  },
  {
    name: "影音设备",
    value: 133,
  },
  {
    name: "办公数码设备",
    value: 113,
  },
  {
    name: "生活电器",
    value: 67,
  },
  {
    name: "厨房电器",
    value: 54,
  },
  {
    name: "智能设备",
    value: 45,
  },
  {
    name: "个人护理电器",
    value: 22,
  },
  {
    name: "服饰鞋包",
    value: 1047,
  },
  {
    name: "服装",
    value: 566,
  },
  {
    name: "饰品",
    value: 289,
  },
  {
    name: "鞋",
    value: 184,
  },
  {
    name: "箱包",
    value: 168,
  },
  {
    name: "奢侈品",
    value: 137,
  },
  {
    name: "母婴亲子",
    value: 1041,
  },
  {
    name: "孕婴保健",
    value: 505,
  },
  {
    name: "母婴社区",
    value: 299,
  },
  {
    name: "早教",
    value: 103,
  },
  {
    name: "奶粉辅食",
    value: 66,
  },
  {
    name: "童车童床",
    value: 41,
  },
  {
    name: "关注品牌",
    value: 271,
  },
  {
    name: "宝宝玩乐",
    value: 30,
  },
  {
    name: "母婴护理服务",
    value: 25,
  },
  {
    name: "纸尿裤湿巾",
    value: 16,
  },
  {
    name: "妈妈用品",
    value: 15,
  },
  {
    name: "宝宝起名",
    value: 12,
  },
  {
    name: "童装童鞋",
    value: 9,
  },
  {
    name: "胎教",
    value: 8,
  },
  {
    name: "宝宝安全",
    value: 1,
  },
  {
    name: "宝宝洗护用品",
    value: 1,
  },
  {
    name: "软件应用",
    value: 1018,
  },
  {
    name: "系统工具",
    value: 896,
  },
  {
    name: "理财购物",
    value: 440,
  },
  {
    name: "生活实用",
    value: 365,
  },
  {
    name: "影音图像",
    value: 256,
  },
  {
    name: "社交通讯",
    value: 214,
  },
  {
    name: "手机美化",
    value: 39,
  },
  {
    name: "办公学习",
    value: 28,
  },
  {
    name: "应用市场",
    value: 23,
  },
  {
    name: "母婴育儿",
    value: 14,
  },
  {
    name: "游戏",
    value: 946,
  },
  {
    name: "手机游戏",
    value: 565,
  },
  {
    name: "PC游戏",
    value: 353,
  },
  {
    name: "网页游戏",
    value: 254,
  },
  {
    name: "游戏机",
    value: 188,
  },
  {
    name: "模拟辅助",
    value: 166,
  },
  {
    name: "个护美容",
    value: 942,
  },
  {
    name: "护肤品",
    value: 177,
  },
  {
    name: "彩妆",
    value: 133,
  },
  {
    name: "美发",
    value: 80,
  },
  {
    name: "香水",
    value: 50,
  },
  {
    name: "个人护理",
    value: 46,
  },
  {
    name: "美甲",
    value: 26,
  },
  {
    name: "SPA美体",
    value: 21,
  },
  {
    name: "花鸟萌宠",
    value: 914,
  },
  {
    name: "绿植花卉",
    value: 311,
  },
  {
    name: "狗",
    value: 257,
  },
  {
    name: "其他宠物",
    value: 131,
  },
  {
    name: "水族",
    value: 125,
  },
  {
    name: "猫",
    value: 122,
  },
  {
    name: "动物",
    value: 81,
  },
  {
    name: "鸟",
    value: 67,
  },
  {
    name: "宠物用品",
    value: 41,
  },
  {
    name: "宠物服务",
    value: 26,
  },
  {
    name: "书籍阅读",
    value: 913,
  },
  {
    name: "网络小说",
    value: 483,
  },
  {
    name: "关注书籍",
    value: 128,
  },
  {
    name: "文学",
    value: 105,
  },
  {
    name: "报刊杂志",
    value: 77,
  },
  {
    name: "人文社科",
    value: 22,
  },
  {
    name: "建材家居",
    value: 907,
  },
  {
    name: "装修建材",
    value: 644,
  },
  {
    name: "家具",
    value: 273,
  },
  {
    name: "家居风格",
    value: 187,
  },
  {
    name: "家居家装关注品牌",
    value: 140,
  },
  {
    name: "家纺",
    value: 107,
  },
  {
    name: "厨具",
    value: 47,
  },
  {
    name: "灯具",
    value: 43,
  },
  {
    name: "家居饰品",
    value: 29,
  },
  {
    name: "家居日常用品",
    value: 10,
  },
  {
    name: "生活服务",
    value: 883,
  },
  {
    name: "物流配送",
    value: 536,
  },
  {
    name: "家政服务",
    value: 108,
  },
  {
    name: "摄影服务",
    value: 49,
  },
  {
    name: "搬家服务",
    value: 38,
  },
  {
    name: "物业维修",
    value: 37,
  },
  {
    name: "婚庆服务",
    value: 24,
  },
  {
    name: "二手回收",
    value: 24,
  },
  {
    name: "鲜花配送",
    value: 3,
  },
  {
    name: "维修服务",
    value: 3,
  },
  {
    name: "殡葬服务",
    value: 1,
  },
  {
    name: "求职创业",
    value: 874,
  },
  {
    name: "创业",
    value: 363,
  },
  {
    name: "目标职位",
    value: 162,
  },
  {
    name: "目标行业",
    value: 50,
  },
  {
    name: "兼职",
    value: 21,
  },
  {
    name: "期望年薪",
    value: 20,
  },
  {
    name: "实习",
    value: 16,
  },
  {
    name: "雇主类型",
    value: 10,
  },
  {
    name: "星座运势",
    value: 789,
  },
  {
    name: "星座",
    value: 316,
  },
  {
    name: "算命",
    value: 303,
  },
  {
    name: "解梦",
    value: 196,
  },
  {
    name: "风水",
    value: 93,
  },
  {
    name: "面相分析",
    value: 47,
  },
  {
    name: "手相",
    value: 32,
  },
  {
    name: "公益",
    value: 90,
  },
];
console.log('jsonlist', jsonlist.length)

let imageData =
  "";

export default {
  data() {
    return {
      chartObj: null,
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  },
  methods: {
    // 初始化图标
    async initChart() {
      myChart = echarts.init(this.$refs["chart"]);

      var maskResource = new Image();
      maskResource.src = imageData;

      myChart.setOption({
        //设置标题，居中显示
        title: {
          text: "E词云图",
          left: "center",
        },
        //数据可以点击
        tooltip: {},
        series: [
          {
            maskImage: maskResource,
            //词的类型
            type: "wordCloud",
            //设置字符大小范围
            sizeRange: [6, 78],
            rotationRange: [-45, 90],
            textStyle: {
              normal: {
                //生成随机的字体颜色
                color: function () {
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                    ].join(",") +
                    ")"
                  );
                },
              },
            },
            //不要忘记调用数据
            data: jsonlist,
          },
        ],
      });
    },
    resizeChart() {
      if (myChart) {
        myChart.resize();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.word-container {
  height: 100%;
  .chart-box {
    height: 100%;
  }
}
</style>
